<template>
    <div>
        <el-dialog :title="currentTitle" :top="top" :visible.sync="currentVisible" :width="calcMaxWidth()">

            <div :style="style.scroll" class="scroll-y">
                <slot></slot>
            </div>
            
            <template v-slot:footer>

                <span style="float:left;">
                    <slot name="footer-left">
                    </slot>
                </span>

                <span class="dialog-footer" v-if="showConfirm">
                    <el-button size="mini" type="default" @click="onCancel">取 消</el-button>
                    <el-button size="mini" type="primary" @click="onConfirm">确 定</el-button>
                </span>

                <span class="dialog-footer" v-if="showClose">
                    <el-button size="mini" type="primary" @click="onClose">关 闭</el-button>
                </span>
            </template>

        </el-dialog>        
    </div>
</template>

<script>
module.exports = {
    data: function() {
        return {
            style: {
                scroll: 'max-height:' + this.calcMaxHeight()
            },
            currentVisible: false,
            currentTitle: '',
            form: {}
        }
    },
    props: {
        width: {
            default: '400px',
            type: String
        },
        height: {
            default: '70%',
            type: String
        },
        top: {
            default: '40px',
            type: String
        },
        title: String,
        showConfirm: Boolean,
        showClose: Boolean,
        visible: Boolean
    },
    created: function() {
        this.currentTitle = this.title;
        // console.log('showConfirm', this.showConfirm);
    },
    methods: {
        open: function(title) {
            if(title != null) {
                this.currentTitle = title;
            }
            this.currentVisible = true;
        },
        onConfirm: function() {
            // console.log('on dialog confirm');
            this.currentVisible = false;
            this.$emit('on-confirm', this.currentTitle);
        },
        onCancel: function() {
            this.currentVisible = false;
            this.$emit('on-cancel');
        },
        onClose: function() {
            this.currentVisible = false;
        },
        calcMaxWidth: function() {
            return Core.calcMaxWidth(this.width);
        },
        calcMaxHeight: function() {
            return Core.calcMaxHeight(this.height);
        }
    }
}
</script>